<template>
  <div class="container">
    <header>
      <span class="iconfont">&#xe602;</span>
      <span>购物车</span>
      <span class="iconfont">&#xe608;</span>
    </header>
    <main>
      <div class="denglu">
        <p>登录享更多优惠</p>
        <span class="iconfont">去登录 &#xe603;</span>
      </div>
      <div class="kong">
        <span class="iconfont">&#xe605;</span>
        <span>购物车还是空的</span>
        <div class="guang" @click="goto('/shouye')">去逛逛</div>
      </div>
      <div class="rec">
        <img src="images/购物车1.png" alt="" />
      </div>
      <ul class="object">
        <li>
          <img src="images/购物车2.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车3.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车4.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车5.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车6.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车7.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车8.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车9.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车10.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车11.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车1.png" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车2.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车3.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车4.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车5.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车6.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车7.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车8.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车9.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
        <li>
          <img src="images/购物车10.jpg" alt="" />
          <div class="zi">
            <p>Redmi K40</p>
            <span><sup>￥</sup>1999</span>
          </div>
        </li>
      </ul>
    </main>
    <footer>
      <Footerbar />
    </footer>
  </div>
</template>

<script>
import Footerbar from "../../components/Footerbar/Footerbar.vue";

export default {
  name: "Gouwuche",
  components: {
    Footerbar,
  },
  methods: {
    goto(path){
      this.$router.replace(path)
    }
  },
};
</script>

<style scoped>
header {
  width: 100%;
  height: 0.5rem;
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  line-height: 0.5rem;
  font-size: 0.156rem;
  color: #666666;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
header span {
  margin: 0 0.2rem;
}
footer {
  height: 0.52rem;
  background-color: rgb(49, 46, 46);
}
main {
  flex: 1;
  /* background-color: #1216e9; */
  overflow-y: auto;
}
.denglu {
  height: 0.541rem;
  background-color: #fff;
  padding: 0 0.166rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.denglu p {
  font-size: 0.1666rem;
}
.denglu span {
  font-size: 0.125rem;
  color: #0000008a;
}

.kong {
  height: 0.6181rem;
  background-color: #ebebeb;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kong .iconfont {
  font-size: 0.41rem;
  color: rgba(0, 0, 0, 0.27);
}
.kong span {
  font-size: 0.125rem;
  color: rgba(0, 0, 0, 0.27);

  margin-right: 0.1rem;
}
.kong .guang {
  text-align: center;
  width: 0.645rem;
  height: 0.2403rem;
  border-radius: 0.05rem;
  border: 0.01rem solid rgba(0, 0, 0, 0.15);
}
.rec {
  height: 0.625rem;
}

.object {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.object li {
  width: 1.8563rem;
  height: 2.4466rem;
}
.object li img {
  height: 1.8563rem;
}
.object li .zi {
  padding: 0.05rem 0.1rem;
}
.object li .zi p {
  font-size: 0.1458rem;
  color: #3c3c3c;
}
.object li .zi span {
  font-size: 0.1666rem;
  color: #ff6700;
}
.object li .zi span sup {
  font-size: 0.15rem;
}
</style>